<template>
  <div class="order-list">
    <div class="order-list-item" ref="wrapper">
      <div>
        <van-card
          v-for="index in 30"
          :key="index"
          price="998.00"
          desc="描述信息"
          title="香格里拉酒店"
          thumb="http://placehold.it/350x350"
        >
          <div slot="tags">
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </div>
          <div slot="footer">
            <span
              class="evaluate"
              :class="evaluate ? '' : 'evaluate-hang-in-the-air'"
              >待评价</span
            >
            <span :class="payment ? '' : 'payment-hang-in-the-air'"
              >未付款</span
            >
          </div>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      evaluate: false,
      payment: false
    };
  },
  mounted() {
    const options = {
      click: true,
      tap: true
    };
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, options);
      } else {
        this.scroll.refresh();
      }
    });
  }
};
</script>

<style lang="stylus" scoped>
.order-list-item {
  position: absolute;
  top: 1.3rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .evaluate {
    margin-right: 12px;
  }

  .evaluate-hang-in-the-air {
    color: orange;
  }

  .payment-hang-in-the-air {
    color: red;
  }
}
</style>
